/**
 * create by young (young2f@outlook.com) on 2020/5/13
 */


'use strict';
import React, {Component} from 'react';
import styles from '../Index.less';
import {Form, Layout} from 'antd';
import SiderTreePlus from './SiderTreePlus';

const { Sider, Content } = Layout;

class DirTree extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {

  }

  componentWillUnmount() {
    const { table } = this.props;
    this.props.dispatch({
      type: 'treeNode/onDataLoad',
      payload: {
        table,
      },
    });
  }

  onSelected = (node) => {
    const { onTreeNodeSelected } = this.props;
    this.state.treeNode = node;
    onTreeNodeSelected && onTreeNodeSelected(node);
  };

  render() {
    const { children, width } = this.props;
    const { treeNode } = this.state;
    const _width = width ? width : '24.3%';

    const _props = { ...this.props };
    _props['onSelected'] = this.onSelected;
    return (<Form>
        <Layout className={styles.layout}>
          {<Sider className={styles.sider} width={_width}>
            {<SiderTreePlus
              {..._props}
            ></SiderTreePlus>}
          </Sider>}
          <Content className={styles.content}>
            {treeNode && children}
          </Content>
        </Layout>
      </Form>
    );
  }
}

export default DirTree;

